<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';

import { onMounted } from 'vue';

import { Page } from '@vben/common-ui';

import dayjs from 'dayjs';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { reqTradeList } from '#/api/order-collection';

import ChildGrid from './ChildGrid.vue';

interface RowType {
  id: number;
  platform_name: string;
  create_at: string;
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    {
      field: 'expand',
      type: 'expand',
      width: 60,
      align: 'center',
      slots: { content: 'expandContent' },
    },
    { title: '指令ID', field: 'id' },
    { title: '交易所', field: 'platform_name' },
    { title: '合约名称', field: 'symbol' },
    { title: '买成交率', field: 'buy_rate', slots: { default: 'buy' } },
    { title: '卖成交率', field: 'sell_rate', slots: { default: 'sell' } },
    { title: '指令时间', field: 'create_at', slots: { default: 'time' } },
  ],
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const res = await reqTradeList({
          page: page.currentPage,
          limit: page.pageSize,
        });
        return {
          items: res.list,
          total: res.total,
        };
      },
    },
    sort: true,
  },
};

const [Grid] = useVbenVxeGrid({ gridOptions });

const toPercentage = (number: number) => {
  return `${(number * 100).toFixed(2)}%`;
};

// const tableData = ref<any[]>([]);
// const pager = ref({
//   page: 1,
//   limit: 20,
// });
// const total = ref(0);

// const preserveExpanded = ref(false);
// const TRADE_STATUS = ['请求未成功', '挂单成功', '完成'];
// const TRADE_STATUS_TAG = ['danger', 'primary', 'success'];
// const TRADE_SIDE = ['BUY', 'SELL'];
// const TRADE_SIDE_TAG = ['success', 'danger'];
// const getTradingCloseRate = async () => {
//   const res: any = await reqTradeList({
//     ...pager.value,
//   });

//   tableData.value = res.list;
//   total.value = res.total;
// };

// watch(
//   [() => pager.value],
//   () => {
//     getTradingCloseRate();
//   },
//   { deep: true },
// );

// const getRowKeys = (row: { id: number }) => {
//   return row.id;
// };

// const expends = ref<number[]>([]);
// const handleExpandChange = (row: any, rows: any) => {
//   if (rows.length > 0) {
//     expends.value = [];
//     row && expends.value.push(row.id); // 只展开当前行id
//   } else {
//     expends.value = [];
//   }
// };

onMounted(() => {
  // getTradingCloseRate();
});
</script>

<template>
  <Page title="" description="">
    <Grid table-title="成交率">
      <template #time="{ row }">
        {{ dayjs(row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
      </template>

      <template #buy="{ row }">
        {{ toPercentage(row.buy_rate) }}
      </template>
      <template #sell="{ row }">
        {{ toPercentage(row.sell_rate) }}
      </template>

      <template #expandContent="{ row }">
        <ChildGrid :data="row" />
      </template>
    </Grid>

    <!-- <ReTable
      :columns="columns"
      :data="tableData"
      :preserve-expanded-content="preserveExpanded"
      style="width: 100%"
      :row-key="getRowKeys"
      :expand-row-keys="expends"
      @expand-change="handleExpandChange"
      :pager="pager"
      :total="total"
      :page-sizes="[200, 300, 500]"
    >
      <template #expand="{ row }">
        <ReTable
          border
          :columns="innerColumns"
          :data="row.orders"
          style="width: 100%"
        >
          <template #side="props">
            <el-tag size="small" :type="TRADE_SIDE_TAG[props.row.side - 1]">
              {{ TRADE_SIDE[props.row.side - 1] }}
            </el-tag>
          </template>
          <template #status="props">
            <el-tag size="small" :type="TRADE_STATUS_TAG[props.row.status]">
              {{ TRADE_STATUS[props.row.status] }}
            </el-tag>
          </template>
        </ReTable>
      </template>
      <template #time="scope">
        {{ dayjs(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </ReTable> -->
  </Page>
</template>

<style scoped lang="scss">
.system {
  height: calc(100vh - 122px);
  padding: 2rem;
  background: var(--el-bg-color);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}
</style>
